<template>
  <div class="box" style="margin-top:30px;">
    <div class="item1">
      <ImportModal ref="importModalId" @importData="onImportData" />
    </div>
    <a-button class="addBtn" type="primary" @click="onAdd">新增</a-button>
    <img class="img" alt="Vue logo" style="width: 24px; height: 24px" src="./img/icon.png" />
    <!-- <a-button @click="onInport()" v-if="category != 4" style="margin-left: 20px"> 批量导入 </a-button> -->
    <CustomTable
      class="item2"
      ref="table"
      :showAlert="false"
      :columns="columns"
      :dataSource="pageData"
      :showSelection="false"
      :showPagination="showPagination"
      rowKey="id"
      @selectedRow="onSelectedRow"
      @change="onTableChange"
    >
      <template slot="order" slot-scope="text, record, index">
        {{ index + 1 }}
      </template>
      <template slot="taskName" slot-scope="text, record, index">
        <a-input
          v-if="isEdit[getIndex(index)]"
          v-model="pageData.records[getIndex(index)].taskName"
          placeholder="请输入"
        />
        <span v-else>{{ pageData.records[getIndex(index)].taskName }}</span>
      </template>
      <template slot="action" slot-scope="text, record, index">
        <a-space size="large">
          <!-- {{ getIndex(index) }}
          {{ record.id }}
          {{ pageData.pages }} -->
          <a v-if="isEdit[getIndex(index)]" @click="onConfirm(getIndex(index))">保存</a>
          <a v-else @click="onEdit(getIndex(index))">编辑</a>
          <a-popconfirm title="是否要删除记录吗?" ok-text="是" cancel-text="否" @confirm="onDelete(getIndex(index))">
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </CustomTable>
  </div>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import ImportModal from './ImportModal'
export default {
  components: { CustomTable, ImportModal },
  data() {
    return {
      pageData: {
        records: [],
        pages: 1,
        size: 5,
        current: 1
      },
      columns: [
        {
          title: '手机',
          dataIndex: 'phone',
          align: 'center',
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '姓名',
          dataIndex: 'name',
          align: 'center',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 200
        }
      ],

      form: {},
      isEdit: [],
      selectKeys: [],
      isSelection: true,
      category: this.$route.query.category,
      isDisabled: true,
      showPagination: true
    }
  },

  created() {
    // this.setType(this.category)
  },
  methods: {
    // setType(category) {
    //   this.isEdit = []
    //   this.category = category
    //   this.pageData = {
    //     records: [],
    //     pages: 1,
    //     size: 5,
    //     current: 1
    //   }
    //   this.isSelection = true
    //   this.showPagination = true
    //   //物品告警
    //   if (category == 2) {
    //     this.columns = this.columns2
    //   }
    //   //账号告警
    //   if (category == 3) {
    //     this.columns = this.columns3
    //   }
    //   //网站告警
    //   if (category == 4) {
    //     this.isSelection = false
    //     this.showPagination = false
    //     this.columns = this.columns4
    //     this.pageData = {
    //       records: [
    //         {
    //           taskName: 'https://www.taobao.com/'
    //         },
    //         {
    //           taskName: 'https://www.weibo.com/'
    //         },
    //         {
    //           taskName: 'https://www.goofish.com/'
    //         },
    //         {
    //           taskName: 'https://tieba.baidu.com/'
    //         }
    //       ],
    //       pages: 1,
    //       size: 5,
    //       current: 1
    //     }
    //   }
    // },
    onSelectedRow(keys) {
      this.selectKeys = keys
      //设置父组件的删除按钮状态
      this.isDisabled = keys.length > 0 ? false : true
    },
    getRecordLength() {
      if (this.category == 4) {
        //第4项没有人为操作产生的记录
        return 0
      } else {
        return this.pageData.records.length
      }
    },
    onClearRowKeys() {
      this.$refs.table.onClearRowKeys()
    },
    getIndex(index) {
      return (this.pageData.current - 1) * this.pageData.size + index
    },
    onAdd() {
      // console.log(this.pageData.records.length)
      //插入第一个
      if (this.pageData.records.length > 1000) {
        this.$message.warning('数量不能超过1000条！')
        return
      }
      this.pageData.records.unshift({ taskName: '' })
      this.isEdit.unshift(true)
      //数据加上id，用于批量删除
      this.pageData.records.forEach((item, index) => {
        item.id = index
      })
      //页面跳到第一页
      this.refreshTable(1)
      //插入最后一个,页面跳到第后一页
      // this.pageData.records.push({ taskName: '' })
      // this.isEdit.push(true)
      // this.refreshTable(this.pageLength)
    },
    onInport() {
      if (this.category == 2) {
        this.$refs.importModalId.add(1)
      }
      if (this.category == 3) {
        this.$refs.importModalId.add(3)
      }
    },
    onImportData(arr) {
      if (arr.length > 1000) {
        this.$message.warning('数量不能超过1000条！')
        return
      }
      if (this.category == 2) {
        arr.forEach(item => {
          this.pageData.records.push({ taskName: item.smuggledGoods })
          this.isEdit.push(false)
          // this.pageData.records.unshift({ taskName: item.smuggledGoods })
          // this.isEdit.unshift(true)
        })
      }
      if (this.category == 3) {
        arr.forEach(item => {
          this.pageData.records.push({ taskName: item.account })
          this.isEdit.push(false)
          // this.pageData.records.unshift({ taskName: item.account })
          // this.isEdit.unshift(true)
        })
      }
      //数据加上id，用于批量删除
      this.pageData.records.forEach((item, index) => {
        item.id = index
      })
    },
    async refreshTable(current) {
      let recordLength = this.pageData.records.length
      this.pageData.pages = parseInt((recordLength - 1) / this.pageData.size) + 1
      this.pageData.current = current
      this.pageData.total = recordLength
    },
    onEdit(index) {
      this.$set(this.isEdit, index, true)
    },
    onDelete(index) {
      this.pageData.records.splice(index, 1)
      this.isEdit.splice(index, 1)
      //数据加上id，用于批量删除
      this.pageData.records.forEach((item, index) => {
        item.id = index
      })
      //页面跳到第一页
      this.refreshTable(1)
    },
    //删除所选
    deleteSelect() {
      // console.log(this.selectKeys)
      let arr = this.$refs.table.getSelectedRowKeys()
      let that = this
      this.$confirm({
        title: `确定要删除吗?`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          if (arr.length !== 0) {
            for (let i = arr.length - 1; i >= 0; i--) {
              that.pageData.records.splice(arr[i], 1)
            }
          }
          that.$refs.table.onClearRowKeys()
          that.refreshTable(1)
        }
      })
    },
    onConfirm(index) {
      if (this.pageData.records[index].taskName == '') {
        this.$message.warning('值不能为空！')
        return
      }
      this.$set(this.isEdit, index, false)
    },
    onTableChange(pageFilter, filters, sorter) {
      this.refreshTable(pageFilter.currentPage)
    },
    getData() {
      return this.pageData.records
    },
    setData(arr) {
      this.pageData.records = arr
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-pagination-options-size-changer.ant-select {
  display: none;
}
.box {
  position: relative;
  overflow: hidden;
  height: 400px;
  .item1 {
    float: left;
    width: 35%;
    height: 100%;
  }
  .item2 {
    float: left;
    width: 55%;
    height: 100%;
    margin-left: 10%;
  }
  .addBtn {
    position: absolute;
    left: 37%;
    top: 0;
  }
  .img {
    position: absolute;
    left: 39%;
    top: 45%;
  }
  /deep/.ant-table-wrapper {
    height: 100%;
  }
  /deep/.ant-table-placeholder {
    border-bottom: none;
  }
}
</style>
